<template>
	<view class="container">
		<zgj-segmented-control :current="current" :values="tabs" style-type="text" active-color="#2ead7a"
			@clickItem="onClickTab" />
		<uni-list :border="false">
			<uni-list-item class="oitem" v-for="item of list" :key="item.id" direction="column"
				>
				<template v-slot:header>
					<view class="zgj-row score-lst-title uni-pb-3">
						<text>{{item.channel_name}}</text>
						<text class="money">￥{{item.amount}}</text>
					</view>
				</template>
				<template v-slot:body>
					<view class="score-list-box">
						<view class="uni-content">
							<view class="tip ">积分：{{item.score}}</view>
							<view class="tip uni-ellipsis-2">{{item.remark}}</view>
						</view>
					</view>
				</template>
				<template v-slot:footer>
					<view class="otime">{{item.create_time}}</view>
				</template>
			</uni-list-item>
			<uni-load-more :status="status"></uni-load-more>
		</uni-list>
	</view>
</template>

<script>
	
	import ZgjSegmentedControl from '../../components/zgj-segmented-control/zgj-segmented-control.vue'
	export default {
		data() {
			return {
				current: 0,
				tabs: ['待确认','已拒绝','已确认'],
				list: [],
				page: 1,
				size: 10,
				total: 0,
				loading: false
				
			};
		},
		components:{ZgjSegmentedControl},
		computed: {
			status() {
				if (this.loading) return 'loading'
				if (this.page >= this.total) return 'noMore'
				return 'more'
			}
		},
		onLoad(e) {
			this.loadData()
		},
		methods: {
			onClickTab(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				this.list = []
				this.page = 1
				this.total = 0
				this.loadData()
			},
			loadData() {
				this.list = []
				this.page = 1
				this.loadPage()
			},
			loadPage() {
				this.loading = true
				this.$http.get('/web/ai/score/apply_list', {
					state: this.current,
					page: this.page,
					size: this.size
				}, (resp) => {
					this.loading = false
					this.total = resp.total_page
					this.page = resp.page
					this.list.push(...resp.items)
					uni.stopPullDownRefresh()
				}, () => {
					this.loading = false
					uni.stopPullDownRefresh()
				})
			},
			// #ifndef APP-NVUE
			onPullDownRefresh() {
				this.loadData()
			},
			onReachBottom() {
				console.log('reach bottom')
				//this.loadMore()
				if (this.total > this.page) {
					this.page++
					this.loadPage()
				}
			}
			// #endif
		}
	}
</script>

<style lang="scss">
	.oitem {
		border-bottom: 10px solid #f8f8f8;
		.money{
			font-size: 14px;
			color: $uni-color-warning;
		}
	}

	.score-lst-title {
		justify-content: space-between !important;
		// border-bottom: 1px solid $uni-border-color;
		font-size: 13px;
	}

	.score-list-box {
		
		// padding: 5px 0;
		// border-bottom: 1px solid $uni-border-color;
	}

	.otime {
		text-align: right;
		color: #666;
		font-size: 14px;
	}
</style>